<template>
  <div class="cs-page-container">
    <el-button
      type="primary"
      size="mini"
      @click="addProvince()"
    >新增</el-button>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          align="center"
          label="补贴地区"
          width="160"
        >
          <template slot-scope="{row}">{{ row }}</template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="140"
        >
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              @click="deleteProvince(scope)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
  import { xhrRewardProvinceUpdate, xhrRewardProvinceList } from '@/api/customSetting'
  import { deepClone } from '@/utils'

  export default {
    name: 'SubsidiesArea',
    data() {
      return {
        list: null
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        xhrRewardProvinceList()
          .then(resp => {
            this.list = resp.data.provinces
            this.listLoading = false
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      },
      deleteProvince(scope){
        let dataList = deepClone(this.list)
        dataList.splice(scope.$index, 1)
        this.update(dataList)
      },
      addProvince(){
        this.$prompt('请输入补贴省份多个省份","分割', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          const values = value.split(",")
          let dataList = deepClone(this.list)
          for (let i in values){
            dataList.push(values[i])
          }
          this.update(dataList)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      update(datalist){
        xhrRewardProvinceUpdate({provinces: datalist})
          .then(resp => {
            this.$message.success("成功")
            this.doSearch()
          })
          .catch(err => {
            this.$message.error(err)
            this.listLoading = false
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    >span{
      width: 30%;
      margin: 10px 0;
      >span{
        font-weight: 700;
      }
    }
  }
</style>
